import { useEffect, useRef,useState } from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { useNavigate } from 'react-router-dom';
import CancelDialog from './CancelDialog/CancelDialog';
import './index.scss'

import { getUserInfo } from '../../utils/localStorage/userInfo';
import ChangePwdDialog from './ChangePwdDialog/ChangePwdDialog';
import {  getUserReserveAPI } from "../../apis/reserve";

const ReserveResult = () => {

    // 取消预约对话框对象
    const cancelDialog = useRef();

    // 修改密码对话框对象
    const changePwdDialog = useRef()

    const navigate = useNavigate();

    // 打开对话框
    const handleClickToOpenDialog = () => {
        cancelDialog.current.openDialog();
    };

    // 预约信息
    const [reserveInfo, setReserveInfo]  =   useState({})

    // 查询预约信息
    const queryReserveInfo = async () => {
        let findReserveInfo = await getUserReserveAPI()
        console.log('查询预约信息', findReserveInfo);
        if (findReserveInfo.code == 1) {
            setReserveInfo(findReserveInfo.data)
        }else{
            alert('查询预约信息失败')
        }
    }

    useEffect(() => {
        queryReserveInfo()
    }, [])

    return (
        <>
            <ChangePwdDialog ref={changePwdDialog} />
            <CancelDialog ref={cancelDialog} />
            <div className='reserveResultPage'>
                <Card style={{
                    display: 'flex',
                    alignItems: 'center',
                    flexDirection: 'column',
                    margin: '0 auto',
                }}>
                    <CardContent>
                        <Typography variant="h5" component="div">
                            预约成功！
                            <Button size="small" onClick={(params) => {
                                changePwdDialog.current.openDialog()
                            }}>修改密码</Button>
                        </Typography>
                        <Typography color="text.secondary">
                            {getUserInfo().name}
                        </Typography>
                        <Typography sx={{ fontSize: 14, mb: 1.5 }} color="text.secondary" gutterBottom>
                            {getUserInfo().studentId}
                        </Typography>
                        <Typography variant="body2">
                            你已成功预约{reserveInfo.location} {reserveInfo.roomsNumber} 教室 {reserveInfo.seatNumber}  号座位
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button size="large" variant="text">教室 {reserveInfo.location} {reserveInfo.roomsNumber}</Button>
                        <Button size="large" variant="text">座位 {reserveInfo.seatNumber}</Button>
                    </CardActions>
                    <Button style={{
                        marginBottom: '20px'
                    }}
                        size="small"
                        color='error'
                        variant='contained'
                        onClick={handleClickToOpenDialog}
                    >
                        取消预约
                    </Button>
                </Card>
            </div>
        </>
    )
}

export default ReserveResult